<template>
	<view>
		<tt-bar title="考勤签到" leftIcon="icon-back">
			<template v-slot:rightCnt>
				<text class="rightText" @tap="toPage" data-url="http://www.de123.com/proto/checkin.html">考勤规则</text>
			</template>
		</tt-bar>
		<view class="latelyBox">
			<text class="lateleTitle">班级：{{ cname }}</text>
			<text class="lateleTitle">课程：{{ gname }}</text>
			<text class="lateleTitle">老师：{{ tname }}</text>
			<text class="lateleTitle">教室：{{ sroom }}</text>
		</view>
		<view class="ckRow">
			<text class="iconfont icon-liebiao"></text>
			<text class="label">上课日期</text>
			<text class="value">{{ csDate }}</text>
			<text class="iconfont icon-right"></text>
		</view>
		<view class="ckRow">
			<text class="iconfont icon-shijian1"></text>
			<text class="label">上课时间</text>
			<text class="value">{{ csTime }}</text>
			<text style="margin: 0 10upx;">——</text>
			<text class="value">{{ edTime }}</text>
			<text class="iconfont icon-right"></text>
		</view>
		<scroll-view class="studentList" scroll-y="true" :style="{ height: scHeight + 'px' }">
			<view class="scList">
				<view class="studentRow" v-for="(item, index) in studentList" :key="index">
					<view class="stuInfo">
						<text class="studentName">{{item.name}}</text>
						<view class="count">
							<text>剩余</text>
							<text class="leftCount">{{item.leftCount}}</text>
							<text>课次</text>
						</view>
					</view>
					<text class="btn" :class="[item.status == 2 ? 'active' : '']" data-type="2" :data-id="index" :data-key="item.id" @tap="setWork">请假</text>
					<!-- <text class="btn" :class="[item.status==3?'active':'']" data-type="3" :data-id="index" :data-key="item.id" @tap="setWork">缺勤</text> -->
					<text class="btn " :class="[item.status == 1 ? 'active' : '']" data-type="1" :data-id="index" :data-key="item.id" @tap="setWork">签到</text>
				</view>
			</view>
			<emptyBox v-if="studentList.length < 1" type="student"></emptyBox>
		</scroll-view>

		<view class="btmFiexBtn" v-if="studentList.length > 0"><button @tap="tijiao" v-if="studentList.length > 0">提交</button></view>
		<hkModal ref="hkModal"></hkModal>
		<w-picker ref="startDate" mode="date" :current="true" :disabled-after="true" statrYear="2020" @confirm="choseDate"></w-picker>
		<nPicker ref="startTime" mode="time" :second="false" :visible.sync="timeShow" @confirm="choseTime"></nPicker>
		<nPicker ref="endTime" mode="time" :second="false" :visible.sync="etimeShow" @confirm="choseETime"></nPicker>
	</view>
</template>

<script>
import ttBar from '@/components/ttBar/ttBar.vue';
import emptyBox from '../../components/emptyBox/emptyBox.vue';
import API from '@/common/api.js';
import hkModal from '@/components/hk-modal/hk-modal.vue';
import { mapState } from 'vuex';
import wPicker from '../../components/w-picker/w-picker.vue';
import nPicker from '../../components/n-picker/w-picker.vue';
export default {
	components: {
		ttBar,
		emptyBox,
		hkModal,
		wPicker,
		nPicker
	},
	computed: {
		...mapState({
			userInfo: state => state.user.userInfo,
			selectShop: state => state.shop.selectShop
		})
	},
	data() {
		return {
			scHeight: uni.getSystemInfoSync().screenHeight - uni.getSystemInfoSync().statusBarHeight - uni.upx2px(620),
			cid: '',
			cname: '',
			gname: '',
			sroom: '',
			tname: '',
			latelyData: {
				data: '',
				time: '',
				qiandao: 0,
				qingjia: 0,
				queqin: 0
			},
			studentList: [],
			postStudent: [],
			bukeStudent: [],
			csDate: '必填',
			csTime: '开始时间',
			edTime: '结束时间',
			timeShow: false,
			etimeShow: false,
			table: null
		};
	},
	methods: {
		setWork(e) {
			let _index = parseInt(e.currentTarget.dataset.id);
			let _status = parseInt(e.currentTarget.dataset.type);
			let _key = e.currentTarget.dataset.key;
			this.studentList[_index].status = _status;
			this.postStudent[_index].status = _status;
		},
		tijiao() {
			if (this.csDate == '必填') {
				uni.showToast({
					title: '请选选择上课日期',
					icon: 'none'
				});
			} else {
				let _data = {
					class_id: this.cid,
					teacherId: this.userInfo.userId,
					items: this.postStudent,
					date: this.csDate,
					begin: this.csTime == '开始时间' ? '' : this.csTime,
					end: this.edTime == '结束时间' ? '' : this.edTime,
					timetableId: this.table.id
				};

				API.createCheckWork(_data).then(res => {
					if (res.data.code == 1) {
						uni.showToast({
							title: '提交考勤成功',
							icon: 'none'
						});
						setTimeout(() => {
							let _data={
								classId: this.table.classId,
								className: this.cname,
								goodName: this.gname,
								classRoom: this.sroom,
								teacherName: this.tname,
								week: this.table.classDate
							}
							uni.setStorageSync('classInfo', _data);
							uni.$emit('upList');
							uni.$emit('rollRefresh');
							
							uni.redirectTo({
								url: '../editWork/editWork?btid=' + res.data.batchId
							});
						}, 1500);
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						});
					}
				});
			}
		},
		getData() {
			let _this = this;
			API.getClassStudent(this.cid).then(res => {
				this.studentList = res.data.data;
				_this.postStudent = [];
				res.data.data.forEach(function(v, i) {
					_this.postStudent.push({
						id: v.id,
						status: v.status == 0 ? 1 : v.status
					});
				});
			});
			API.getClassCheckListById(this.cid).then(res => {
				if (res.data.data.length > 0) {
					this.latelyData = this.dataChange(res.data.data)[0].data[0];
				} else {
					//如果没有学员
				}
			});
		},
		dataChange(data) {
			data = data.groupArr('batch_id');

			data.forEach(function(item, val) {
				item.date = item.group.substr(2, 4) + '-' + item.group.substr(6, 2) + '-' + item.group.substr(8, 2);
				item.time = item.group.substr(10, 2) + ':' + item.group.substr(12, 2) + ':' + item.group.substr(14, 2);
			});

			return data.groupArr('date');
		},
		selectDate() {
			this.$refs.startDate.show();
		},
		selectTime() {
			this.timeShow = true;
		},
		selectEtime() {
			this.etimeShow = true;
		},
		choseDate(e) {
			this.csDate = e.result;
		},
		choseTime(e) {
			if (this.edTime != '结束时间') {
				let _start = parseInt(e.result.replace(':', ''));
				let _end = parseInt(this.edTime.replace(':', ''));
				if (_start > _end) {
					uni.showToast({
						title: '开始时间不能晚于结束时间',
						icon: 'none'
					});
				} else {
					this.csTime = e.result;
				}
			} else {
				this.csTime = e.result;
			}
		},
		choseETime(e) {
			if (this.csTime != '开始时间') {
				let _start = parseInt(this.csTime.replace(':', ''));
				let _end = parseInt(e.result.replace(':', ''));
				if (_start > _end) {
					uni.showToast({
						title: '结束时间不能早于开始时间',
						icon: 'none'
					});
				} else {
					this.edTime = e.result;
				}
			} else {
				this.edTime = e.result;
			}
		}
	},
	onLoad(cfm) {
		if (uni.getStorageSync('classTable')) {
			let _classTable = uni.getStorageSync('classTable');
			this.table = _classTable;
			this.cid = _classTable.classId;
			this.cname = _classTable.className;
			this.gname = _classTable.courseName;
			this.sroom = _classTable.classRoom;
			this.tname = _classTable.teacherName.substr(0, _classTable.teacherName.length - 1);
			this.csTime = _classTable.begin ? _classTable.begin : '开始时间';
			this.edTime = _classTable.end ? _classTable.end : '结束时间';
			this.csDate = _classTable.rollDate;
			this.getData();
		}
	}
};
</script>

<style lang="less">
page {
	background-color: #f6f6f6;
}
.ckRow {
	background-color: #ffffff;
	height: 90upx;
	display: flex;
	align-items: center;
	border-bottom: 1px solid #f6f6f6;
	padding: 0 38upx;
	.iconfont:first-child {
		font-size: 44upx;
		color: #8c8bad;
		margin-right: 10upx;
	}
	.label {
		font-size: 32upx;
		color: #5b5b5b;
		flex-grow: 1;
	}
	.value {
		font-size: 32upx;
		color: #909090;
	}
	.iconfont:last-child {
		color: #909090;
		font-size: 32upx;
		margin-left: 20upx;
	}
}
.rightBox {
	display: flex;
	align-items: center;
	height: 90upx;
	text {
		flex-shrink: 0;
	}
}

.rightIcon {
	width: 35upx;
	height: 35upx;
	margin-right: 10upx;
}

.rightText {
	color: #8483a4;
	font-size: 28upx;
}

.latelyBox {
	display: flex;
	flex-direction: column;
	padding: 0upx 38upx;
	justify-content: center;
	background-color: #8c8bad;
	color: #ffffff;
	height: 230upx;
	overflow: hidden;
	transition: all 0.2s;

	text {
		font-size: 28upx;
	}
}

.tabBar {
	height: 96upx;
	display: flex;
	background-color: #ffffff;
	justify-content: center;
	align-items: center;

	text {
		display: inline-block;
		box-sizing: border-box;
		font-size: 32upx;
		color: #5b5b5b;
		height: 96upx;
		line-height: 96upx;
		border-bottom: 8upx solid rgba(0, 0, 0, 0);
	}

	.line {
		width: 3rpx;
		height: 36rpx;
		background-color: #efefef;
		margin: 100upx;
	}

	.active {
		color: #fba121;
		border-bottom: 8upx solid #fbc521;
	}
}

.scList {
	padding: 28upx 20upx;
	display: flex;
	flex-direction: column;

	.studentRow {
		display: flex;
		align-items: center;
		height: 110upx;
		background-color: #ffffff;
		box-shadow: 0rpx 3rpx 17rpx 0rpx rgba(201, 202, 208, 0.15);
		border-radius: 10rpx;
		padding-left: 38upx;
		padding-right: 24upx;
		margin-bottom: 20upx;

		.stuInfo {
			font-size: 28rpx;
			color: #5b5b5b;
			flex: 1;
			display: flex;
			flex-direction: column;
			.studentName{
				font-size: 32upx;
			}
			.count{
				font-size: 24upx;
				.leftCount{
					color: #F0AD4E;
					margin: 0 4upx;
				}
			}
		}

		.btn {
			width: 110rpx;
			height: 78upx;
			border-radius: 10upx;
			border: solid 3upx #a6a3c0;
			text-align: center;
			box-sizing: border-box;
			line-height: 72upx;
			font-size: 28upx;
			color: #a6a3c0;
			margin-left: 28upx;
		}

		.active {
			background-color: #fbc521;
			border: solid 3upx #fbc521;
			color: #ffffff;
		}
	}
}

.ani {
	height: 0;
}

.btmFiexBtn {
	position: fixed;
	width: 100%;
	height: 120upx;
	bottom: 0;
	left: 0;
	background-color: #ffffff;
	display: flex;
	align-items: center;

	button {
		width: 496upx;
		height: 80upx;
		background-color: #ffb423;
		border-radius: 40rpx;
		border: none;
		line-height: 80upx;
		color: #ffffff;
	}

	button:after {
		border: none;
	}
}
</style>
